<template name="skeletonGood">
    <view class="skeleton_good_container">
        <view class="skeleton_loading"></view>
        <view class="group1"></view>
        <view class="group2">
            <view class="group2_box_top">
                <view class="group2_box_top_left"></view>
                <view class="group2_box_top_right"></view>
            </view>
            <view class="group2_box_bootm">
                <view class="group2_box_bootm_left"></view>
                <view class="group2_box_bootm_right"></view>
            </view>
            <view class="group2_box_3"> </view>
            <view class="group2_box_4"> </view>
        </view>
        <view class="group3">
            <view class="group3_item" v-for="i in 4" :key="`k${i}`"></view>
        </view>
        <view class="group4">
            <view class="group4_top">
                <view class="group_top_left"></view>
            </view>
            <view class="group4_bottom"></view>
        </view>
        <view class="group5">
            <view class="group5_left">
                <view class="group5_left_top">
                    <view></view>
                    <view></view>
                </view>
                <view class="group5_left_bottom">
                    <view></view>
                    <view></view>
                </view>
            </view>
            <view class="group5_right">
                <div class="group5_right_button"></div>
                <div class="group5_right_button"></div>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.skeleton_good_container {
    position: relative;
    top: 0;
    left: 0;
    z-index: 99999;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
    .group1 {
        width: 100%;
        height: 750rpx;
        margin-bottom: 29rpx;
        background: #eeeeee;
    }
    .group2 {
        padding: 29rpx;
        margin-bottom: 18rpx;
        background-color: #fff;
        .group2_box_top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 9rpx;
            .group2_box_top_left {
                width: 553rpx;
                height: 29rpx;
                margin-top: 7rpx;
                background: #eeeeee;
            }
            .group2_box_top_right {
                width: 40rpx;
                height: 40rpx;
                background: #eeeeee;
            }
        }
        .group2_box_bootm {
            display: flex;
            justify-content: space-between;
            margin-bottom: 33rpx;
            .group2_box_bootm_left {
                width: 357rpx;
                height: 29rpx;
                background: #eeeeee;
            }
            .group2_box_bootm_right {
                width: 40rpx;
                height: 40rpx;
                background: #eeeeee;
            }
        }
        .group2_box_3 {
            width: 98rpx;
            height: 29rpx;
            margin-bottom: 18rpx;
            background: #eeeeee;
        }
        .group2_box_4 {
            width: 116rpx;
            height: 36rpx;
            background: #eeeeee;
        }
    }
    .group3 {
        padding: 40rpx 29rpx;
        margin-bottom: 53rpx;
        background-color: #fff;
        .group3_item {
            width: 100%;
            height: 29rpx;
            margin-bottom: 51rpx;
            background: #eeeeee;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .group4 {
        .group4_top {
            padding: 34rpx 29rpx 24rpx;
            background-color: #fff;
            .group_top_left {
                width: 116rpx;
                height: 40rpx;
                background-color: #eeeeee;
            }
        }
        .group4_bottom {
            width: 100%;
            height: 850rpx;
        }
    }
    .group5 {
        position: fixed;
        bottom: 0;
        width: calc(100% - 60rpx);
        padding: 7rpx 29rpx 11rpx 31rpx;
        padding-bottom: calc(11rpx + var(--safe-area-inset-bottom));
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        .group5_left {
            width: 144rpx;
            margin-right: 56rpx;
            .group5_left_top {
                display: flex;
                justify-content: space-between;
                margin-bottom: 5rpx;
                & > view {
                    width: 43rpx;
                    height: 43rpx;
                    background: #eeeeee;
                    border-radius: 4rpx;
                }
            }
            .group5_left_bottom {
                display: flex;
                justify-content: space-between;
                & > view {
                    width: 43rpx;
                    height: 22rpx;
                    background: #eeeeee;
                    border-radius: 4rpx;
                }
            }
        }
        .group5_right {
            flex: 1;
            display: flex;
            .group5_right_button {
                width: 50%;
                height: 66rpx;
                border-radius: 33rpx;
                background: #eeeeee;
                &:first-child {
                    margin-right: 18rpx;
                }
            }
        }
    }
}
</style>
